<script setup>
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useAppStore } from '@/store/modules/app'
import { usePermissionStore } from '@/store/modules/permission'
import SidebarItem from './SidebarItem.vue'
import Logo from '../Logo/index.vue'
import { getCssVariableValue } from '@/utils/index'

const route = useRoute()
const appStore = useAppStore()
const permissionStore = usePermissionStore()

const activeMenu = computed(() => {
  const {
    meta: { activeMenu },
    path,
  } = route
  return activeMenu ? activeMenu : path
})
const noHiddenRoutes = computed(() => permissionStore.routes.filter(item => !item.meta?.hidden))
const isCollapse = computed(() => !appStore.sidebar.opened)
console.log('noHiddenRoutes', noHiddenRoutes.value)
</script>

<template>
  <div class="has-logo">
    <Logo :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :unique-opened="false"
        :collapse-transition="true"
        popper-effect="light"
        mode="vertical"
      >
        <SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.has-logo {
  .el-scrollbar {
    height: calc(101% - 60px);
  }
}

.el-scrollbar {
  height: 101%;

  :deep(.scrollbar-wrapper) {
    overflow-x: hidden !important;

    .el-scrollbar__view {
      height: 100%;
    }
  }

  :deep(.el-scrollbar__bar) {
    &.is-horizontal {
      display: none;
    }

    &.is-vertical {
      display: none;
    }
  }
}

.el-menu {
  min-height: 100%;
  margin: 0 auto;
  background-color: var(--el-color-white) !important;
  border: none;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-sub-menu .el-menu-item),
:deep(.el-menu--horizontal .el-menu-item) {
  max-width: 180px;
  height: 40px;
  margin: 15px auto;
  line-height: 40px;

  .el-icon {
    color: #616666;
  }

  &.is-active,
  &:hover {
    font-weight: bold;
    background-color: var(--sidebar-menu--active-bg-color);
    border-radius: 8px;

    .el-icon {
      color: var(--el-text-color-primary) !important;
    }
  }
}

:deep(.el-sub-menu__icon-arrow) {
  width: auto;
}

:deep(.el-sub-menu) {
  &.is-active {
    > .el-sub-menu__title {
      color: var(--el-text-color-primary) !important;
    }
  }
}
</style>
